import React from 'react';
import './index.css';

interface CategoryItem {
  id: string;
  name: string;
  icon: string;
  path?: string;
}

interface CategoryGridProps {
  categories: CategoryItem[];
  columns?: number;
  onCategoryClick?: (category: CategoryItem) => void;
}

const CategoryGrid: React.FC<CategoryGridProps> = ({
  categories,
  columns = 4,
  onCategoryClick
}) => {
  const handleCategoryClick = (category: CategoryItem) => {
    onCategoryClick?.(category);
  };

  return (
    <div className="category-grid">
      <div 
        className="category-grid__container"
        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
      >
        {categories.map((category) => (
          <div
            key={category.id}
            className="category-grid__item"
            onClick={() => handleCategoryClick(category)}
          >
            <div className="category-grid__icon">
              {category.icon}
            </div>
            <div className="category-grid__name">
              {category.name}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default CategoryGrid; 